import React from 'react';
import { openLink } from '../../../../util';
import * as API_HOMEPAGE from '../../../../apis/homepage';
import Loading from '../../Loading';

class MobileQuickEntry extends React.Component {
  constructor(props) {
    super(props);
    this.onLoadData = this.onLoadData.bind(this);
    this.state = {
    loading: false,
    data: [],
    showMode:'1',
    ShowLayout:'1',
    fontcolor:'#4994F4',
    ShowNum:'3',
    _ewidth:'0',
    eid:"",
    eWidth:'75',
    eHeight:'75',
    eTitleRow:'0'
    };
  }

  componentDidMount() {
    const { eid } = this.props;
      let width = 0;
          if( document.getElementById("item_"+eid)) {
              width = window.getComputedStyle(document.getElementById("item_"+eid)).width;
              this.setState({
                  _ewidth: width,
              });
          }
  }

  componentDidUpdate() {

  }


  componentWillMount() {
    this.onLoadData();
  }

  componentWillReceiveProps(nextProps) {
    if (!nextProps.refreshing) {
      this.onLoadData();
    }
  }

  render() {
    const { eid } = this.props;
    const { loading, data = [] ,showMode,fontcolor,ShowNum,ShowLayout,_ewidth,eHeight,eWidth,eTitleRow} = this.state;
    let _ShowNum = ShowNum;
    let maxwidth = 0;
    let lastLineStyle= {};
    let num = (parseInt(_ShowNum) + 1) * 10;
    const length = data.length;
    let width = parseInt((parseInt(_ewidth) - num) / _ShowNum);

    let lineNum = Math.ceil(length/parseInt(_ShowNum));
    if(_ShowNum==0) {
      width=0;
    }


    if(showMode == '1' || showMode == '2' || showMode == '0') {

        if(_ShowNum!=0) {
            maxwidth = _ShowNum * eWidth;
        }else{
            _ShowNum = Math.floor(parseInt(_ewidth) / eWidth);
        }

        if(maxwidth>parseInt(_ewidth)){
            _ShowNum = Math.floor(parseInt(_ewidth) / eWidth);
        }

      lineNum = Math.ceil(length/parseInt(_ShowNum))
        let widthshiji = (parseInt(_ewidth)-((_ShowNum-1)*2))/_ShowNum;
        if(widthshiji<eWidth){
            width = eWidth;
        }else {
            width =  widthshiji;
        }
    }else if(showMode == '4' || showMode == '3' || showMode == '5'){
        if(_ShowNum!=0) {
            maxwidth = _ShowNum * 150;
        }else{
            _ShowNum = Math.floor(parseInt(_ewidth) / 150);
        }

        if(maxwidth > parseInt(_ewidth)){
            _ShowNum = Math.floor(parseInt(_ewidth) / 150);
        }
        lineNum = Math.ceil(length/parseInt(_ShowNum));
        let widthshiji = (parseInt(_ewidth)-((_ShowNum-1)*2))/_ShowNum;
        if(widthshiji<150){
            width = 150;
        }else {
            width =  widthshiji;
        }

    }
    let quickEntryCom = <div/>
    let quickEntryCom2 = <div/>

    const lastLineIndex = (lineNum - 1) * parseInt(_ShowNum);
    let itemStyle = {
      borderBottom: '2px dashed #E9E9E9',
      borderRight: '2px dashed #E9E9E9',
    }

      let quickentryTitleStyle = {

      }
      if(showMode == '0' || showMode == '1' || showMode == '2' ){
          quickentryTitleStyle = {
              whiteSpace: 'nowrap',
              overflow: 'hidden',
              textOverflow: 'ellipsis',
          }
      }else {
          quickentryTitleStyle = {
              whiteSpace: 'nowrap',
              overflow: 'hidden',
              textOverflow: 'ellipsis',
              lineHeight:eHeight+'px',
          }
      }

      let rongqiStyle = {}
      if(eTitleRow == '1'){
          if(showMode == '0' || showMode == '1' || showMode == '2' ){
              quickentryTitleStyle = {
                  WebkitLineClamp: '2',
                  webkitBoxOrient: 'vertical',
                  overflow: 'hidden',
                  width:eWidth,
                  textOverflow: 'ellipsis',
                  display:'-webkit-box',
                  height:'26px',
                  wordBreak:'break-all',
                  wordWrap:'break-word',
              }
          }else{
              quickentryTitleStyle = {
                  transform: 'translateY(-50%)',
                  top: '50%',
                  right: '0px',
                  position: 'absolute',
                  WebkitLineClamp: '2',
                  webkitBoxOrient: 'vertical',
                  overflow: 'hidden',
                  textOverflow: 'ellipsis',
                  display:'-webkit-box',
                  wordBreak:'break-all',
                  wordWrap:'break-word',
              }
          }

          rongqiStyle = {
              position:'relative',
          }
      }




      if(ShowLayout && ShowLayout== '2' && lastLineIndex >= 0) {
        if(showMode == "1")
        lastLineStyle={display: 'block', margin: '0 auto',width: (length-lastLineIndex) * width + (length-lastLineIndex-1)*2 + 'px' }
            else
        lastLineStyle={display: 'block', margin: '0 auto',width: (length-lastLineIndex) * width + 'px' }
    }



    if(data=="undefined"||data==null)return(<div/>)
    let dataCom = <div/>

    switch (showMode) {
      case '0': // 上下布局-无背景色/分割线
        quickEntryCom = data && data.length>0 && data.map((item, index) => {
          if(index>= lastLineIndex) {
            return;
          }
          return (
              <div title={item.title} onClick={() =>  this.onOpen(item.link)} style={{width: width+ 'px', float: 'left', cursor: 'pointer', marginTop: '10px'}} >
                <img className={'quickentry-img'} style = {{width: eWidth+'px',height: eHeight+'px'}} src={item.picture} alt/>
                <div className={'quickentry-title1'} style={{...quickentryTitleStyle ,color: fontcolor}}>{item.title}</div>
              </div>
          )
        })
        quickEntryCom2 = data && data.length>0 && data.map((item, index) => {
          if (index >= lastLineIndex) {
            return (
                <div title={item.title} onClick={() =>  this.onOpen(item.link)} style={{width: width+ 'px', float: 'left', cursor: 'pointer', marginTop: '10px'}} >
                  <img className={'quickentry-img'} style = {{width: eWidth+'px',height: eHeight+'px'}} src={item.picture} alt/>
                  <div className={'quickentry-title1'} style={{...quickentryTitleStyle ,color: fontcolor}}>{item.title}</div>
                </div>
            )
          }

        })
        break;
      case '1': // 上下布局-有分割线
        quickEntryCom = data && data.length>0 && data.map((item, index) => {
            itemStyle = {
                borderBottom: '2px dashed #E9E9E9',
                borderRight: '2px dashed #E9E9E9',
            }
          if(index>= lastLineIndex) {
            return;
          }else if((index+1) % parseInt(_ShowNum) == 0) {
            itemStyle = {
              borderBottom: '2px dashed #E9E9E9',
            }
          }
          return (
              <div title={item.title} onClick={() =>  this.onOpen(item.link)} style={{width: width+ 'px', float: 'left', cursor: 'pointer', ...itemStyle}} >
                <img className={'quickentry-img'}  style={{width: eWidth+'px',height: eHeight+'px',paddingTop:'10px'}}  src={item.picture} alt/>
                <div className={'quickentry-title1'} style={{...quickentryTitleStyle ,color: fontcolor}}>{item.title}</div>
              </div>
          )
        })
        quickEntryCom2 = data && data.length>0 && data.map((item, index) => {
          if(index+1 == length) {
            itemStyle={}
          }else {
            itemStyle = {
              borderRight: '2px dashed #E9E9E9',
            }
          }
          if (index >= lastLineIndex) {
            return (
                <div title={item.title} onClick={() =>  this.onOpen(item.link)}
                     style={{width: width+ 'px', float: 'left', cursor: 'pointer', ...itemStyle}}>
                  <img className={'quickentry-img'} style={{width: eWidth+'px',height: eHeight+'px',paddingTop:'10px'}} src={item.picture} alt/>
                  <div className={'quickentry-title1'} style={{...quickentryTitleStyle ,color: fontcolor}}>{item.title}</div>
                </div>
            )
          }

        })
        break;
      case '2': // 上下布局-有背景色
        quickEntryCom = data && data.length>0 && data.map((item, index) => {
          if(index>= lastLineIndex) {
            return;
          }
          return (
              <div title={item.title} onClick={() =>  this.onOpen(item.link)} style={{width: width+ 'px', float: 'left', cursor: 'pointer',paddingTop: '10px', backgroundColor: item.bgcolor}} >
                <img className={'quickentry-img'}  style = {{width: eWidth+'px',height: eHeight+'px'}}  src={item.picture} alt/>
                <div className={'quickentry-title1'} style={{...quickentryTitleStyle ,color: fontcolor}}>{item.title}</div>
              </div>
          )
        })
        quickEntryCom2 = data && data.length>0 && data.map((item, index) => {
          if (index >= lastLineIndex) {
            return (
                <div title={item.title} onClick={() =>  this.onOpen(item.link)} style={{width: width+ 'px', float: 'left', cursor: 'pointer', paddingTop: '10px',backgroundColor: item.bgcolor}} >
                  <img className={'quickentry-img'}  style = {{width: eWidth+'px',height: eHeight+'px'}}  src={item.picture} alt/>
                  <div className={'quickentry-title1'} style={{...quickentryTitleStyle ,color: fontcolor}}>{item.title}</div>
                </div>
            )
          }

        })
        break;
      case '3': //左右布局-无背景色/分割线
        quickEntryCom = data && data.length>0 && data.map((item, index) => {
          if(index>= lastLineIndex) {
            return;
          }
          return (
              <div title={item.title} onClick={() => this.onOpen(item.link)} style={{width: width+ 'px', float: 'left', cursor: 'pointer',marginTop: '10px'}} >
                <div style={{margin: '5px auto',  width: (parseInt(eWidth)+75)+'px', height:  eHeight+'px',...rongqiStyle}}>
                  <img style={{display: 'block', width: eWidth+'px', height: eHeight+'px', float: 'left'}} className={'quickentry-img'} src={item.picture} alt/>
                  <div style={{width: '75px',cursor: 'pointer',display: 'block',float: 'left', color: fontcolor,...quickentryTitleStyle}} className={'quickentry-title'}>{item.title}</div>
                </div>
              </div>
          )
        })
        quickEntryCom2 = data && data.length>0 && data.map((item, index) => {
          if (index >= lastLineIndex) {
            return (
                <div title={item.title} onClick={() => this.onOpen(item.link)}  style={{width: width+ 'px', float: 'left', cursor: 'pointer', marginTop: '10px'}} >
                  <div style={{margin: '5px auto', width: (parseInt(eWidth)+75)+'px', height:  eHeight+'px',...rongqiStyle}}>
                    <img style={{display: 'block',  width: eWidth+'px', height: eHeight+'px', float: 'left'}} className={'quickentry-img'} src={item.picture} alt/>
                    <div style={{width: '75px',cursor: 'pointer',display: 'block',float: 'left', color: fontcolor,...quickentryTitleStyle }} className={'quickentry-title'}>{item.title}</div>
                  </div>
                </div>
            )
          }

        })
        break;
      case '4': //左右布局-有分割线
        quickEntryCom = data && data.length>0 && data.map((item, index) => {
            itemStyle = {
                borderBottom: '2px dashed #E9E9E9',
                borderRight: '2px dashed #E9E9E9',
            }
          if(index>= lastLineIndex) {
            return;
          }else if((index+1) % parseInt(_ShowNum) == 0) {
            itemStyle = {
              borderBottom: '2px dashed #E9E9E9',
            }
          }
          return (
              <div title={item.title} onClick={() => this.onOpen(item.link)}  style={{width: width+ 'px', float: 'left', cursor: 'pointer', ...itemStyle}} >
                <div style={{margin: '5px auto', width: (parseInt(eWidth)+75)+'px', height:  eHeight+'px',...rongqiStyle}}>
                  <img style={{display: 'block',  width: eWidth+'px', height: eHeight+'px', float: 'left', marginTop: '0px'}} className={'quickentry-img'} src={item.picture} alt/>
                  <div style={{width: '75px', cursor: 'pointer',display: 'block',float: 'left', color: fontcolor, ...quickentryTitleStyle}} className={'quickentry-title'}>{item.title}</div>
                </div>
              </div>
          )
        })
        quickEntryCom2 = data && data.length>0 && data.map((item, index) => {
          if (index >= lastLineIndex) {
            if(index+1 == length) {
              itemStyle={}
            }else {
              itemStyle = {
                borderRight: '2px dashed #E9E9E9',
              }
            }
            return (
                <div title={item.title} onClick={() => this.onOpen(item.link)}  style={{width: (width-1.5)+ 'px', float: 'left', cursor: 'pointer',...itemStyle}} >
                  <div style={{margin: '5px auto',  width: (parseInt(eWidth)+75)+'px', height:  eHeight+'px',...rongqiStyle}}>
                    <img style={{display: 'block',  width: eWidth+'px', height: eHeight+'px', float: 'left', marginTop: '0px'}} className={'quickentry-img'} src={item.picture} alt/>
                    <div style={{width: '75px', cursor: 'pointer',display: 'block',float: 'left', color: fontcolor, ...quickentryTitleStyle}} className={'quickentry-title'}>{item.title}</div>
                  </div>
                </div>
            )
          }

        })
        break;
      case '5': //左右布局-有背景色
        quickEntryCom = data && data.length>0 && data.map((item, index) => {
          if(index>= lastLineIndex) {
            return;
          }
          return (
              <div title={item.title} onClick={() => this.onOpen(item.link)}  style={{width: width+ 'px', float: 'left', cursor: 'pointer', backgroundColor: item.bgcolor}} >
                <div style={{margin: '5px auto', width: (parseInt(eWidth)+75)+'px', height:  eHeight+'px',...rongqiStyle}}>
                  <img style={{display: 'block', width: eWidth+'px', height: eHeight+'px', float: 'left', marginTop: '0px'}} className={'quickentry-img'} src={item.picture} alt/>
                  <div style={{width: '75px',cursor: 'pointer',display: 'block',float: 'left', color: fontcolor, ...quickentryTitleStyle}} className={'quickentry-title'}>{item.title}</div>
                </div>
              </div>
          )
        })
        quickEntryCom2 = data && data.length>0 && data.map((item, index) => {
          if (index >= lastLineIndex) {
            return (
                <div title={item.title} onClick={() => this.onOpen(item.link)}  style={{width: width+ 'px', float: 'left', cursor: 'pointer', backgroundColor: item.bgcolor}} >
                  <div style={{margin: '5px auto', width: (parseInt(eWidth)+75)+'px', height:  eHeight+'px',...rongqiStyle}}>
                    <img style={{display: 'block', width: eWidth+'px', height: eHeight+'px', float: 'left', marginTop: '0px'}} className={'quickentry-img'} src={item.picture} alt/>
                    <div style={{width: '75px',cursor: 'pointer',display: 'block',float: 'left', color: fontcolor, ...quickentryTitleStyle}} className={'quickentry-title'}>{item.title}</div>
                  </div>
                </div>
            )
          }

        })
        break;
      default:
        quickEntryCom = data && data.length>0 && data.map((item, index) => {
          if (index >= lastLineIndex) {
            return;
          }
          return (
              <div title={item.title} onClick={() => this.onOpen(item.link)}  style={{width: width+ 'px', float: 'left', cursor: 'pointer', marginTop: '10px'}} >
                <img className={'quickentry-img'} src={item.picture} alt/>
                <div className={'quickentry-title'} style={{color: fontcolor}}>{item.title}</div>
              </div>
          )
        })
        quickEntryCom2 = data && data.length>0 && data.map((item, index) => {
          if (index >= lastLineIndex) {
            return (
                <div title={item.title} onClick={() => this.onOpen(item.link)}  style={{width: width+ 'px', float: 'left', cursor: 'pointer', marginTop: '10px'}} >
                  <img className={'quickentry-img'} src={item.picture} alt/>
                  <div className={'quickentry-title'} style={{color: fontcolor}}>{item.title}</div>
                </div>
            )
          }

        })
    }

    return (
        <div className={`content content_${eid}`} >
        <div className="data" style={{overflowX: 'auto'}}>
          <Loading loading={loading}>
            {quickEntryCom }
            <div style={lastLineStyle}>{quickEntryCom2}</div>
          </Loading>
        </div>
        </div>
    )
    }

  onLoadData() {
    const { hpid, subCompanyId, eid, ebaseid } = this.props;
    const params = { hpid, subCompanyId, eid, ebaseid };

    this.setState({ loading: true });
    API_HOMEPAGE.getElementData(params).then(result => {
      const { data = [] ,eShowMode,eid,fontcolor,eShowLayout,eShowNum,eTitleRow,eWidth,eHeight} = result;
      this.setState({ loading: false, data ,showMode:eShowMode,fontcolor:fontcolor,ShowLayout:eShowLayout,ShowNum:eShowNum,eid:eid,eTitleRow:eTitleRow,eWidth:eWidth,eHeight:eHeight});
    });
  }

  onOpen(url) {
    openLink(url);
  }

}



export default MobileQuickEntry;
